<template>
	<view>
		<!-- <topbar title="" background="background:#FFDE21"></topbar> -->
		<view>
			<view class="dhl" style="background-color: #5EBCA3;"></view>
			<view class="topbar box dis_f_c_c" style="background-color: #5EBCA3;color: #fff;">
					人脉管理
			<image  class="top_jt" src="../../static/icon/back2.png" mode="aspectFit" @click="go_back"></image>
			</view>
		</view>
		<view class="r_btn dis_f_l_c">
			<image src="../../static/xuan_shang/xfj.png" mode=""></image>
			<view @click="go_fb">发布人脉</view>
		</view>
		<view class="tab">
			<u-tabs :list="list" bg-color="none" active-color="#222222" bar-width="196" bar-height="4" inactive-color="#BBBBBB" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="content">
			<view class="gg_part"  v-for="(item,index) in lists" @click="go_xq(item.id)">
				<view class="dis_f_sb_t" style="width: 100%;margin-bottom: 48rpx;">
					<view class="hh" style="width: 482rpx;">{{item.content}}</view>
					<view class="size_22 c_b">{{item.create_time}}</view>
				</view>
				<!-- <view class="dis_f_l_c" style="margin-bottom: 12rpx;">
					<view class="size_22 c_b">置顶剩余{{item.istop_num - item.istop_endnum}},刷新剩余{{item.refresh_num - item.refresh_endnum}}</view>
					
				</view> -->
				<view class="dis_f_l_c an_niu" v-if="status_true">
					<view class="btn" style="color: #5EBCA3;border: 2rpx solid #5EBCA3;" @click.stop="go_top(item.id)">置顶</view>
					<view class="btn" style="color: #6DADBE;border: 2rpx solid #6DADBE;"@click.stop="pay_type_show(item.id)">刷新</view>
					<view class="btn" style="color: #E23C63;border: 2rpx solid #E23C63;" @click.stop="shelf(item.id)">下架</view>
				</view>
			</view>
			<view v-if="lists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
			<view style="padding-bottom: 120rpx;">
				<u-loadmore :status="status" v-if="lists != ''"/>
			</view>
		</view>
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{price}}</text>
					<text class="u-font-20 u-padding-left-10">{{type_money}}</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
		
		<u-popup v-model="type_show" mode="center" width="400" height="300" border-radius="20">
			<view class="dis_f_co_l_c tc_pay">
				<view class="dis_f_l_c" @click="pay_type_show_2(1)" style="margin-left: 100rpx;">
					<image src="../../static/mine/lingqian.png" mode=""></image>
					<view>零钱</view>	
				</view>
				<view class="dis_f_l_c" @click="pay_type_show_2(2)" style="margin-left: 100rpx;">
					<image src="../../static/mine/lingqian.png" mode=""></image>
					<view>金币</view>	
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '显示中'
				},
				{
					name: '审核中'
				},{
					name: '已下架'
				}, ],
				current: 0,
				lists:[],
				status_true:true,
				page:1,
				price:1,
				password:'',
				pay_id:0,
				status: 'nomore',
				zys:0,
				show:false,
				
				type_show:false,
				pay_type:0,//支付方式 1 零钱 2 金币
				type_money:'元',
			};
		},
		onLoad() {
		},
		onBackPress(e) {
		    console.log(e);
			// return;
		    if(e.from == 'backbutton'){
				uni.switchTab({
					url:'/pages/mine/mine'
				})
		    return true;//阻止默认返回行为
		    }
			 return true;//阻止默认返回行为
		},

		onShow() {
			this.page = 1;
			this.lists = [];
			this.$.ajax(1, 'post', 'index/checktokens', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				console.log(res)
				if(res.code == 9){
					this.$.ti_shi('token已过期，请重新登陆')
				uni.clearStorageSync()
					setTimeout( () => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}, 1000)
				return;
				}
				else{
					this.getlist()
				}
			})
			
		},
		methods:{
			pay_type_show(id) {
				this.type_show = true;
				this.pay_id = id;
			},
			pay_type_show_2(e) {
				this.pay_type = e;
				this.pay_show();
				this.type_show = false;
				if(e == 1) {
					this.type_money = '元';
				}else{
					this.type_money = '币';
				}
			},
			go_back(){
				this.$.open_tab('/pages/mine/mine')
			},
			shelf(id){
				this.$.ajax(1, 'post', 'fans/shelf_fans', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:id,
				}, (res) => {
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						this.$.open('/pages/ren_mai/rm_gl');
					}else if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
					}
					
				})
			},
			go_xq(e) {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
							this.$.open('/pages/ren_mai/edit?id='+e)
					}
				})
				
			},
			go_top(e){
				this.$.open('/pages/xuan_shang/zhi_ding?id='+ e + '&type=' + 2)
			},
			go_refresh(e){
				this.$.open('/pages/xuan_shang/shua_xin?id='+ e + '&type=' + 2)
			},
			getlist(){
				this.$.ajax(1, 'post', 'fans/fans_list', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				status:this.current,
				page:this.page,
			}, (res) => {
				if(res.code == 1){
					this.zys = res.pagecount
					if(res.data != ''){
						res.data.forEach((item,index)=>{
							this.lists.push(item);
						})
					}
				}else if(res.code == 9){
					this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
				}
				
			})
			},
			del(e){
				this.$.ajax(1, 'post', 'index/delguang', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:e,
				}, (res) => {
					// console.log(res.list[0].user)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						this.getguang()
					}else if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}else{
						this.$.ti_shi(res.msg)
					}
					
				})
			},
			go_fb() {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.$.open('/pages/ren_mai/fb')
						// this.$.open('/pages/guang_gao/gg_list?cate='+e)
					}
				})
				
			},
			change(index) {
				console.log(index)
				this.page = 1;
				this.lists = [];
				this.current = index;
				this.getlist();
				if (index == 0) {
					this.status_true = true;
				}else{
					this.status_true = false;
				}
			},
			
			pay_show(id){
				//获取该用户悬赏刷新价格
				this.$.ajax(1, 'post', 'fans/get_refresh_price', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					if(res.code == 1){
						this.price = res.price;
						this.show = true
					}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000); 
						}
					}
				})
			},
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			pay(){
				if (this.pay_id == 0) {
					this.$.ti_shi('参数错误')
					return;
				}
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				this.$.ajax(1, 'post', 'fans/refresh', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					password:this.password,
					id:this.pay_id,
					pay_type:this.pay_type
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/ren_mai/rm_gl');
						}, 2000);
					}else{
						this.password = '';
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
				})
				this.show = false
			}	
			
			
			
			
			
		},
		onReachBottom() {
			if(this.page+1 <= this.zys){
				this.status = 'loading';
				this.page = ++this.page;
				this.getlist()
			}else{
				this.status = 'nomore';
				return;
			}
		}
	}
</script>

<style lang="scss">
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
		
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		color: #fff;
		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}
	.tab{
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		width: 100%;
		padding: 0 48rpx;
		height: 88rpx;
		z-index: 999;
	}
	.content{
		width: 100%;
		top: calc(var(--status-bar-height) + 176rpx);
		z-index: 998;
		position: absolute;
		padding: 36rpx 24rpx;
		.gg_part{
			width: 100%;
			margin-bottom: 12rpx;
			padding: 36rpx 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			.an_niu{
				.btn{
					padding: 8rpx 29rpx;
					border-radius: 10rpx;
					margin-right: 12rpx;
					line-height: 33rpx;
					font-size: 22rpx;
				}
				.an_niu > .btn:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
	
	.tc_pay{
		width: 100%;
		// padding: 20rpx;
		height: 100%;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			
		}
	}
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}
	
	}
</style>
